<template>
  <div class="comSize">
    <div class="picSize">
      <pic-zoom :url="url"
                :scale="3"
                :scroll="true"></pic-zoom>
    </div>
    <div class="picList">
      <ul>
        <li v-for="(item,i) in srcList"
            :key="i"
            :class="[isActive==i?'checked':'']"
            @click="changImg(item,i)">
          <img :src='item'>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import PicZoom from 'vue-piczoom'
export default {
  name: 'FTBPirView',
  props: {
    srcList: Array
  },
  data () {
    return {
      isActive: 0,
      url: this.srcList[0]
    }
  },
  components: {
    PicZoom
  },
  methods: {
    changImg (src, index) {
      this.isActive = index
      this.url = src
    }
  }
}
</script>

<style lang="stylus" scoped>
.comSize {
  width: 700px;
  height: 420px;
}

.picSize {
  width: 400px;
  height: 400px;
  border: 1px solid #eee;
}

img {
  vertical-align: middle;
  width: 100%;
  height: 100%;
}

.picList {
  position: relative;
  overflow: hidden;
  margin-top: 10px;
}

.picList li {
  position: relative;
  float: left;
  padding: 2px;
  width: 68px;
  height: 68px;
  border: 2px solid #000;
  margin-left: 4px;
  // 鼠标变手
  cursor: pointer;
}

.picList .checked {
  border: 2px solid #ff6a00;
}
</style>
